<template>
  <div class="pre-order">
    <h1>确认订单</h1>
    <!-- 表格 -->
    <qf-table
      :tableData="tableData"
      :columns="columns"
      :border="false"
      :tableLoading="tableLoading"
    >
      <!-- 产品名称 -->
      <template v-slot:productName="{ row }">
        <img
          :src="row.imageUrl"
          style="vertical-align: middle"
          height="20"
          alt=""
        />
        &nbsp;
        <b style="color: red">{{ row.productName }}</b>
        <br />
        <b>{{ row.description }}</b>
      </template>
      <!-- 产品数量 -->
      <template v-slot:quantity="{ row }">
        <el-input-number
          v-model="quantity"
          :min="1"
          @change="handleCountChange(row.price)"
          :max="row.inventory + 1"
          label="描述文字"
        ></el-input-number>
      </template>
      <!-- 总价格 -->
      <template v-slot:total>
        <b style="color: red; font-size: 20px">{{ tableTotal }}元</b>
      </template>
    </qf-table>
    <!-- //确认订单的按钮 -->
    <div class="total-fee">
      <div class="box-wrap">
        <div class="box-shadow">
          <span
            class="realpay--title"
            data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg"
          >
            实付款：
          </span>
          <span class="realpay--price-symbol">¥</span>
          <span class="realpay--price" style="color: rgb(255, 80, 0)">
            {{ tableTotal }}
          </span>
          <div class="order-confirmAddr">
            <div class="confirmAddr-addr-user">
              <span class="confirmAddr-title">充值详情：</span>
              <span class="confirmAddr-pro">
                {{ desc }}
              </span>
            </div>
            <div class="confirmAddr-addr">
              <span class="confirmAddr-title">充值账户：</span>
              <span class="confirmAddr-usn">
                {{ userInfo.nickname }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button type="danger" @click="commitOrder">提交订单</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import qfTable from "@/components/qfTable/index.vue";
import * as api from "@/api/product";
import * as payApi from "@/api/pay";
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, computed } from "vue";
import { useUser } from "@/store/users";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
//pinia的用户信息
let userStore = useUser();
let { userInfo } = storeToRefs(userStore);
//当前路由对象
let route = useRoute();
//最大的路由对象
let router = useRouter();
//业务
//1.获取上一个页面传递过来的query参数,获取当前的产品信息
let { product_id } = route.query;
// console.log(product_id)
//2.展示产品信息
//根据商品的id获取商品的详情,发送请求
let desc = ref("");
let getProduct = async () => {
  tableLoading.value = true;
  try {
    let res = await api.getProductApi(product_id);
    console.log(res);
    tableData.value = res.data.data;
    tableLoading.value = false;
    //产品的详情,进行赋值,表格下面的结构使用
    desc.value = res.data.data[0].description;
    //第一次拿到了商品,所以对total进行初次赋值操作,可以将数据中的Price作为total的首次参数
    tableTotal.value = res.data.data[0].price;
  } catch (e) {
    console.log(e);
    tableLoading.value = false;
  }
};

onMounted(() => {
  getProduct();
});

//声明一个表格的加载动画

let tableLoading = ref(false);

//声明一个表格数据
let tableData = ref([]);

//声明一个列对象,用于展示表格数据

let columns = ref([
  {
    label: "产品名称",
    prop: "productName",
  },
  {
    label: "单价",
    prop: "price",
  },
  {
    label: "数量",
    prop: "quantity",
  },
  {
    label: "总价格",
    prop: "total",
  },
]);

//声明计数器的数量和

let quantity = ref(1);

//计算总价格(只是给用户看的,并不能决定最终付款的价格)
let tableTotal = ref("0.00");
let handleCountChange = (price) => {
  tableTotal.value = (quantity.value * price).toFixed(2);
};

//3.进行下单

//支付核心流程或者关键字
//下单: 传递商品id和商品数量

let commitOrder = async () => {
  //1.调用下单接口,传递和产品的数量
  try {
    let res = await payApi.preOrderApi(product_id, quantity.value);
    console.log(res);
    //2.跳转页面,跳转到支付页面 pay/payment
    router.push({
      path: "/pay/payment",
      query: { order_id: res.data.order_id },
    });
    ElMessage({
      type: "success",
      message: res.data.msg,
    });
  } catch (e) {
    console.log(e);
  }

  //3.payment页面需要拉取订单详情,并且发起支付
};

//支付: 传递订单id
</script>
<script>
export default {
  meta: {
    name: "确认订单",
  },
};
</script>
<style lang="scss" scoped>
.price {
  color: #ff0036;
  font-weight: bolder;
}

.total_fee {
  font-size: 16px;
  color: #ff0036;
}

.el-button {
  width: 180px;
  border-radius: 0;
}

.confirm-title {
  text-align: left;
  margin-bottom: 30px;
}

.pre-order {
  padding: 80px 100px 0 100px;
}

.total-fee {
  margin-top: 50px;
  text-align: right;
}

.box-wrap {
  display: inline-block;
  border: 1px solid #ff0036;

  .box-shadow {
    border: 3px solid #fff0e8;
    min-width: 300px;
    padding: 10px 5px 10px 20px;

    .realpay--title {
      font-weight: 700;
      color: #333;
    }

    .realpay--price-symbol {
      font-size: 26px;
      margin-right: 4px;
      color: #999;
    }

    .realpay--price {
      color: #ff0036;
      font: 700 26px tahoma;
    }

    .order-confirmAddr {
      line-height: 1.6;
      font-weight: bolder;
      margin-top: 10px;
      font-size: 16px;

      // text-align: center;
      // font-family: "PingFang SC";
      .confirmAddr-usn {
        color: #ff0036;
        font-size: 20px;
      }

      .confirmAddr-pro {
        color: goldenrod;
        font-size: 16px;
      }
    }
  }
}
</style>
